<template>
    <view>
        <view
            v-if="loading"
            class="loading-i"
        >
            <u-loading
                mode="flower"
                size="60"
            ></u-loading>
        </view>
        <view
            v-else
            class="container"
            :style="{ backgroundColor: curMarchData.bg_color }"
        >
            <view
                v-if="rule"
                class="rules-icon"
                @click="showRuleFn"
                >活动规则</view
            >
            <view
                class="is_delete_icon"
                v-if="curMarchData.is_delete == 1"
            >
                <image
                    mode="widthFix"
                    width="50%"
                    :src="$setting.imageUrl() + 'static/is_delete_icon.png'"
                ></image>
            </view>
            <view class="cur-march-container">
                <view
                    class="march-empty"
                    v-if="!isShowPage"
                >
                    <u-empty
                        text="当前时间暂无赛事"
                        mode="data"
                    ></u-empty>
                </view>
                <view v-else>
                    <image
                        mode="widthFix"
                        style="width: 100%"
                        :src="curMarchData.bg_img"
                    ></image>
                    <view class="cur_match">
                        <image
                            mode="widthFix"
                            style="width: 200rpx"
                            :src="curMarchData.national_flag_l"
                        ></image>
                        <view class="cur-team-name">
                            {{ curMarchData.team }}
                        </view>
                        <image
                            mode="widthFix"
                            style="width: 200rpx"
                            :src="curMarchData.national_flag_r"
                        ></image>
                    </view>
                    <view class="cur_time">
                        竞猜时间：{{
                            curMarchData.start_time_text +
                            '-' +
                            curMarchData.end_time_text
                        }}
                    </view>
                    <!-- 比分列表 -->
                    <view class="score_container" v-if="!isPick">
                        <u-row gutter="20">
                            <u-col
                                span="4"
                                v-for="(item, index) in scoreList"
                                :key="index"
                                @click="currentChoose(item)"
                            >
                                <view
                                    class="country-item"
                                    :class="{
                                        'is-cur-item':
                                            item.european_score_id ==
                                            picking.european_score_id,
                                    }"
									:style="item.score==''?'padding:0;border:0':''"
                                >
                                    <view class="cell-item-name">
										<img class="bollimg" src="https://ossimg.jiumaioda.com/upload/2024-06-07/20240607095703dd9fd9553.png" alt="" v-if="dealWithBoll(item.score,0)"/>
										<text>{{ item.score || '' }}</text>
										<img class="bollimg" src="https://ossimg.jiumaioda.com/upload/2024-06-07/20240607095703dd9fd9553.png" alt="" v-if="dealWithBoll(item.score,1)" />
                                    </view>
                                </view>
                            </u-col>
                        </u-row>
                    </view>
                    <view style="padding: 20rpx">
						<template v-if="match_data.status==2">
							<b-u-button-grey
							    height="80rpx"
							    width="50%"
							>
							    该赛事竞猜已截止
							</b-u-button-grey>
						</template>
						<template v-else>
							<b-u-button-grey
								v-if="isPick"
								height="80rpx"
								width="50%"
							>
								当前订单已参与赛事
							</b-u-button-grey>
							<b-u-button-theme
								v-else
								height="80rpx"
								width="50%"
								@click.stop="confirmScore"
							>
								确定赛事比分
							</b-u-button-theme>
						</template>
                    </view>
                </view>
            </view>
            <!-- 悬浮 -->
            <view class="float">
                <view
                    class="showMarchList"
                    @click="matchListShow = true"
                >
                    全部赛事
                </view>
                <view
                    class="myMarchList"
                    @click="getMyGuessingScoreList"
                >
                    我的比分
                </view>
            </view>
            <!-- 全部赛事 -->
            <close-popup
                :show-pop="matchListShow"
                @onClose="matchListShow = false"
            >
                <view class="popup-container">
                    <view class="newCustomWhite">
                        <view class="ruleTitle">全部赛事</view>
                        <view
                            v-if="europeanMatchList.length == 0"
                            class="newCustomList"
                        >
                            <u-empty
                                text="暂无赛事"
                                mode="data"
                            ></u-empty>
                        </view>
                        <scroll-view
                            v-else
                            :scroll-y="true"
                            class="newCustomList"
                        >
                            <view
                                v-for="(march_item, index) in europeanMatchList"
                                class="march-item"
                                :class="{
                                    'cur-march-item':
                                        march_item.european_match_id ==
                                        match_data.european_match_id,
                                }"
                                :key="index"
                            >
                                <!--  0：未开始，1：进行中，2已结束 -->
                                <view
                                    class="prize-icon"
                                    :class="{
                                        is_prize: march_item.status === 1,
                                        is_waiting: march_item.status === 0,
                                    }"
                                >
                                    <view class="prize-icon-text">
                                        {{ march_item.status_text }}</view
                                    >
                                </view>
                                <view class="item-icon">
                                    <image
                                        mode="widthFix"
                                        style="width: 100rpx"
                                        :src="march_item.national_flag_l"
                                    ></image>
                                    <view class="team-name">
                                        {{ march_item.team }}
                                    </view>
                                    <image
                                        mode="widthFix"
                                        style="width: 100rpx"
                                        :src="march_item.national_flag_r"
                                    ></image>
                                </view>
                                <view class="time">
                                    竞猜时间：
                                    {{
                                        march_item.start_time_text +
                                        '-' +
                                        march_item.end_time_text
                                    }}
                                </view>
                            </view>
                        </scroll-view>
                    </view>
                </view>
            </close-popup>
            <!-- 我的比分 -->
            <close-popup
                :show-pop="myMarchListShow"
                @onClose="myMarchListShow = false"
            >
                <view class="popup-container">
                    <view class="newCustomWhite">
                        <view class="ruleTitle">我的比分</view>
                        <view
                            v-if="myMatchList.length == 0"
                            class="newCustomList"
                        >
                            <u-empty
                                text="暂无比分"
                                mode="data"
                            ></u-empty>
                        </view>
                        <scroll-view
                            v-else
                            :scroll-y="true"
                            class="newCustomList"
                        >
                            <view
                                v-for="(item, index) in myMatchList"
                                class="march-item"
                                :key="index"
                            >
                                <!-- is_delete 1=作废 -->
                                <view
                                    v-if="item.is_delete != 1"
                                    class="prize-icon"
                                    :class="{
                                        is_prize: item.is_prize !== 2,
                                    }"
                                >
                                    <view class="prize-icon-text">
                                        {{ item.is_prize_text }}</view
                                    >
                                </view>
                                <view
                                    v-if="item.is_delete == 1"
                                    class="prize-icon"
                                >
                                    <view class="prize-icon-text">已作废</view>
                                </view>
                                <view class="item-icon">
                                    <image
                                        mode="widthFix"
                                        style="width: 100rpx"
                                        :src="item.national_flag_l"
                                    ></image>
                                    <view class="team-name">{{
                                        item.team
                                    }}</view>
                                    <image
                                        mode="widthFix"
                                        style="width: 100rpx"
                                        :src="item.national_flag_r"
                                    ></image>
                                </view>
                                <view class="time">
                                    已猜比分：{{
                                        item.score_text
                                    }}，最终比分：{{ item.result_score_text }}
                                </view>
                            </view>
                        </scroll-view>
                    </view>
                </view>
            </close-popup>
            <close-popup
                :show-pop="showRule"
                @onClose="showRule = false"
            >
                <view class="rules">
                    <view class="rule-title"> 活动规则 </view>
                    <u-parse
                        :html="rule"
                        :tag-style="{ img: 'display:block' }"
                    ></u-parse>
                </view>
            </close-popup>
        </view>
    </view>
</template>

<script>
export default {
    name: 'european',
    data() {
        return {
            userInfo: null,
            options: {},
            // 全部赛事
            europeanMatchList: [],
            myMatchList: [],
            // 当前赛事
            match_data: {},
            // 用户已选（接口）
            user_picking: null,
            // 用户所选（接口已选则，不可再选）
            picking: {},
            // 所有比分列表
            scoreList: [],
            matchListShow: false,
            myMarchListShow: false,
            // showPage
            isHaveMatchData: true,
            isHavePickingData: true,
            isPick: true,
            loading: true,
            rule: '',
            showRule: false,
        };
    },
    watch: {
        // isShowPage(val) {
        //     // if (!this.isShowPage) {
        //     //     // uni.switchTab({
        //     //     //     url: '/pages/index/index',
        //     //     // });
        //     // }
        // },
    },
    computed: {
        isShowPage() {
            return this.isPick || this.isHaveMatchData;
        },
        curMarchData() {
            // 当前订单用户是否已选过，已选过则为用户所选赛事，未选过则为当前进行中赛事
            const curMarchData = this.user_picking
                ? this.user_picking
                : this.match_data;
            return curMarchData;
        },
    },
    async onLoad(options) {
        this.options = options;
        await this.$onLaunched;
    },
    async onShow() {
        await this.$onLaunched;
        this.getHttp();
    },
    methods: {
		dealWithBoll(ntxt,tp) {
		    let nary = ntxt.split(':');
		    if(parseInt(nary[0])>parseInt(nary[1])){
				if(tp==0){
					return true;
				}else{
					return false;
				}
			}else if(parseInt(nary[0])<parseInt(nary[1])){
				if(tp==1){
					return true;
				}else{
					return false;
				}
			}else{
				return false;
			}
		},
        async getHttp() {
            this.getUserInfo();
            this.getEuropeanScoreList();
            this.getEuropeanActivity();
            await this.setData();
            this.loading = false;
        },
        setData() {
            return Promise.all([
                this.getEuropeanMatchList(),
                this.getUserPickingData(),
            ]);
        },
        async getUserInfo() {
            try {
                const res = await uni.$u.api.userInfo();
                this.userInfo = res.userInfo;
            } catch (error) {}
        },
        async getEuropeanMatchList() {
            try {
                const res = await uni.$u.api.getEuropeanMatchList();
                const europeanMatchList = res?.list ?? [];
                this.$set(this, 'europeanMatchList', europeanMatchList);
                const match_data = res?.match_data ?? {};
                this.$set(this, 'match_data', match_data);
                this.isHaveMatchData = res.match_data !== null;
				console.log(res.match_data,'[[[[[[[[[[res?.list]]]]]]]]]]')
            } catch (error) {}
        },
        async getUserPickingData() {
            try {
                const res = await uni.$u.api.getUserPickingData({
                    order_no: this.options.order_no,
                });
                this.user_picking = res.user_picking;
                this.picking = this.$u.deepClone(res.user_picking);
                this.isPick = res.user_picking !== null;
                console.log(res, res.user_picking);
            } catch (error) {}
        },
        async getMyGuessingScoreList() {
            try {
                const res = await uni.$u.api.getMyGuessingScoreList();
                if (res.list.length) {
                    this.$set(this, 'myMatchList', res.list);
                    this.myMarchListShow = true;
                } else {
                    uni.showToast({
                        title: '暂无参加记录',
                        icon: 'none',
                    });
                }
            } catch (error) {
                uni.showToast({
                    title: '暂无比分',
                    icon: 'none',
                });
            }
        },
        async getEuropeanScoreList() {
            try {
                const res = await uni.$u.api.getEuropeanScoreList();
				res.list[res.list.length] = res.list[res.list.length-1];
				let templist = res.list[res.list.length-1];
				let oldlist = res.list[res.list.length-2];
				res.list[res.list.length-1] = res.list[res.list.length-3];
				res.list[res.list.length-2] = {european_score_id:0,score:''};
				res.list[res.list.length-3] = res.list[res.list.length-4];
				res.list[res.list.length-4] = res.list[res.list.length-5];
				res.list[res.list.length-5] = templist;
                this.scoreList = res.list;
				// console.log(res.list)
            } catch (error) {}
        },
        async confirmScore() {
            try {
                if (uni.$u.test.isEmpty(this.userInfo.mobile)) {
                    uni.navigateTo({
                        url: '/pages/login/login',
                    });
                    return;
                }
                if (this.isPick) {
                    uni.showToast({
                        title: '当前订单已参与比分',
                        icon: 'none',
                    });
                    return;
                }
                if (uni.$u.test.isEmpty(this.picking)) {
                    uni.showToast({
                        title: '请选择比分',
                        icon: 'none',
                    });
                    return;
                }
                const { european_score_id = '' } = this.picking;
                const { european_match_id = '' } = this.curMarchData;
                if (uni.$u.test.isEmpty(european_score_id)) {
                    uni.showToast({
                        title: '请选择比分',
                        icon: 'none',
                    });
                    return;
                }
                if (uni.$u.test.isEmpty(european_match_id)) {
                    uni.showToast({
                        title: '当前无赛事',
                        icon: 'none',
                    });
                    return;
                }
                await uni.$u.api.postGuessingScore({
                    order_no: this.options.order_no,
                    european_score_id,
                    european_match_id,
                });
                uni.showToast({
                    title: '成功参与',
                    icon: 'none',
                });
                this.isPick = true;
            } catch (error) {
                console.log(error);
            }
        },
        async currentChoose(item) {
            try {
                if (this.isPick) {
                    uni.showToast({
                        title: '当前订单已参与比分',
                        icon: 'none',
                    });
                    return;
                }
                this.picking = { ...this.picking, ...item };
            } catch (error) {}
        },
        async getEuropeanActivity() {
            try {
                const res = await uni.$u.api.getEuropeanActivity();
                this.rule = res.data.score_rule;
            } catch (error) {}
        },
        showRuleFn() {
            this.showRule = true;
        },
    },
};
</script>

<style lang="scss" scoped>
.march-empty {
    height: 60vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.cur_match {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10rpx 20rpx;
}
.cur-team-name {
    margin: 0 20rpx;
    font-size: 32rpx;
    font-weight: bold;
    color: #fff;
}
.float {
    display: flex;
    flex-direction: column;
    position: fixed;
    bottom: 30vh;
    right: 0%;
    color: #fff;
}
.showMarchList {
    // width: 100rpx;
    // height: 100rpx;
    padding: 10rpx;
    margin-bottom: 20rpx;
    border-radius: 20rpx 0 0 20rpx;
    background-color: #bb0024;
    box-shadow: 0rpx 4rpx 12rpx 0rpx #888992;
    writing-mode: vertical-rl;
}
.myMarchList {
    // width: 100rpx;
    // height: 100rpx;
    padding: 10rpx;
    border-radius: 20rpx 0 0 20rpx;
    background-color: #bb0024;
    box-shadow: 0rpx 4rpx 12rpx 0rpx #888992;
    writing-mode: vertical-rl;
}
.popup-container {
    background-color: #fff;
    border-radius: 24rpx;
}
.newCustomList {
    max-height: 80vh;
    overflow: scroll;
    width: 80vw;
    padding-top: 20rpx;
}

.ruleTitle {
    width: 100%;
    padding-top: 20rpx;
    text-align: center;
    font-weight: bold;
    font-size: 32rpx;
}
.march-item {
    margin-bottom: 20rpx;
    box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.09);
    border: 1px solid rgba(0, 0, 0, 0);
}
.cur-march-item {
    background-color: #fcbd7136;
}
.item-icon {
    display: flex;
    padding: 20rpx 60rpx 10rpx;
    justify-content: center;
    align-items: center;
}
.team-name {
    flex: 1;
    text-align: center;
}
.time {
    text-align: center;
    font-size: 18rpx;
    color: #999999;
    padding-bottom: 20rpx;
}
.cur_time {
    text-align: center;
    font-size: 24rpx;
    // color: #999999;
    color: #fff;
    padding-bottom: 20rpx;
}
.country-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    border: 2px solid #bb002500;
    border-radius: 8rpx;
    padding: 4rpx;
    margin-top: 20rpx;
    background-color: #fff;
	.cell-item-name{
		display: flex;
		flex-direction: row;
		align-items: center;
		line-height: 50rpx;
		font-family: Arial, Helvetica, sans-serif;
	}
	.bollimg{
		width: 30rpx;
		height: 30rpx;
		margin:0 10rpx;
	}
}

.is-cur-item {
    border: 2px solid #bb0024;
    background-color: #bb0024;
    color: #fff;
}
.score_container {
    margin: 20rpx;
}
.loading-i {
    height: 60vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.prize-icon {
    position: absolute;
    right: 0rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 90rpx;
    height: 90rpx;
    font-weight: bold;
    border: 3px solid #999;
    border-radius: 50%;
    color: #999;
    transform: rotate(-30deg);
    background-color: #fff;
}
.is_prize {
    border: 3px solid red;
    color: red;
}
.is_waiting {
    border: 3px solid #fcbd71;
    color: #fcbd71;
}
.is_delete_icon {
    width: 100%;
    height: 60vh;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
}
.prize-icon-text {
    border: 2px solid;
    border-radius: 10rpx;
    padding: 0px 4rpx;
    position: absolute;
    // width: calc(100% + 30rpx);
    white-space: nowrap;
    text-align: center;
    background-color: #fff;
}
.rules {
    max-height: 80vh;
    overflow: scroll;
    width: 80vw;
    padding: 20rpx;
    border-radius: 24rpx;
    background-color: #000000;
    opacity: 0.7;
    color: #fff;
}
.rule-title {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10rpx;
}
.rules-icon {
    position: absolute;
    right: 0;
    top: 30rpx;
    background-color: #00000075;
    color: #fff;
    padding: 6rpx 20rpx;
    font-size: 24rpx;
    border-radius: 24rpx 0 0 24rpx;
}
</style>
